<template>
	<view class="uni_box home">
		<!-- <navbar title='每日打卡' :yin="true">
		</navbar> -->
		<view class="wenhead">
			<!-- <image class="pbg" src="@/pages_subject/static/img/wenbg.png" mode="" /> -->
			<view class="wenitem">
				<u-icon name="arrow-left" color="#fff" size="40" class="fan" @click="getfan"></u-icon>
				<text class="biaoti">每日打卡</text>
			</view>
			<view class="dakaview">
				<view class="kaleft">
					<text class="cinum">36次</text>
					<text class="leiji">累计签到</text>
				</view>
				<view class="karight">
					<view class="qview">
						<image class="qianbg" src="@/pages_subject/static/img/qianbg.png" mode="" />
						<view class="qiantxt">
							签到
						</view>
					</view>
					<!-- <view class="qview">
						<image class="ka" src="@/pages_subject/static/img/ka.png" mode="" />
						<view class="yida">
							已打卡
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="content">
			<view class="moxue">
				<image class="mobg" src="@/pages_subject/static/img/shibg.png" mode="" />
				<view class="xueitem">
					<view class="rihead">
						<u-icon name="arrow-left" color="rgba(253, 137, 79, 1)" size="40" class="fan"></u-icon>
						<text class="nian">2020年7月</text>
						<u-icon name="arrow-right" color="rgba(253, 137, 79, 1)" size="40" class="fan"></u-icon>
					</view>
					<view class="xuelist">
						<view class="xues xueone" v-for="(item, index) in rihead" :key="index">
							<text class="shi">{{ item.name }}</text>
						</view>
					</view>
					<view class="xuelist">
						<view class="xues" v-for="(item, index) in 24" :key="index" @click="getshichang(index)">
							<text class="shi" :class="day_hour == index + 1 ? 'shiactive' : ''">{{ index + 1 }}h</text>
						</view>
					</view>
				</view>
			</view>
		</view>

</view>
</template>

<script>
export default {
	data() {
		return {
			rihead:[
				{name:'日'},
				{name:'一'},
				{name:'二'},
				{name:'三'},
				{name:'四'},
				{name:'五'},
				{name:'六'},
			],
			combo_id:''
		}
	},
	onLoad(option) {
		this.combo_id = option.combo_id
		this.getstaus()
	},
	onShow() {
	},
	methods: {
		async getstaus(){
			let res = await this.$u.api.getSignStatus({
				combo_id:this.combo_id
			});

		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.wenhead{
	position: relative;
	height: 600rpx;
	background: linear-gradient(111deg, #F06103 0%, #FA504E 100%);
	// border-radius: 50%;
	.pbg{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.wenitem{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		.fan{
			position: absolute;
			left: 30rpx;
		}
		.biaoti{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}

	}
	.dakaview{
		position: relative;
		display: flex;
		flex-direction: row;
		margin: 10% 0;
		.kaleft{
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1rpx solid #fff;
			.cinum{
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.leiji{
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: 400;
				display: inline-block;
				margin-top: 20rpx;
			}
		}
		.karight{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			.qview{
				width: 200rpx;
				height: 200rpx;
				display: flex;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.ka{
					width: 68rpx;
					height: 68rpx;
					margin-bottom: 20rpx;
				}
				.yida{
					font-size: 15px;
					color: #FFFFFF;
					font-weight: 400;
				}
				.qianbg{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.qiantxt{
					font-weight: 500;
					font-size: 30rpx;
					color: #EF1B22;
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
.content {
	background-color: #fff;

	// padding-bottom: 150rpx;
	.moxue {
		position: relative;
		height: 700rpx;
		margin: 30rpx;
		margin-top: -18%;
		.mobg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.xueitem {
			position: relative;
			width: 100%;
			height: 100%;
			padding:45px 30rpx 30rpx;
			// background: #FBECE8;
			// border-radius: 20rpx;
			.rihead{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.nian{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #F06103;
				}
			}
			.xuelist {
				// height: 200px;
				width: 100%;
				// margin-top: 10%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.xues {
					width: 14%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;

					.shi {
						min-width: 68rpx;
						height: 68rpx;

						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;

					}

					.shiactive {
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);
						color: #FFFFFF;
					}
				}
				.xueone{
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					.shi{
						color: #666666;
					}
				}
			}
		}
	}

	.dasuan {
		display: flex;
		position: relative;
		width: 90%;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		height: 100%;

		.nida {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			display: inline-block;
		}

		.xuan {
			width: 300rpx;
			height: 55rpx;
			background: #FFFFFF;
			border: 1px solid #CCCCCC;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-left: auto;
		}

		.onexuan {
			color: #999;
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.twoitem {
		height: auto;
		margin-top: 13%;
	}
}

.wancheng {
	height: 70rpx;
	background: linear-gradient(-90deg, #FA4E4E, #FD894F);
	border-radius: 5rpx;
	width: 94%;
	margin: 50rpx auto 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
}

.wanchengtwo {
	height: 70rpx;
	background: linear-gradient(-90deg, #FA4E4E, #FD894F);
	border-radius: 5rpx;
	width: 94%;
	margin: 50rpx auto 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
	position: absolute;
	bottom: 5%;

}

.wanchengthree {
	height: 70rpx;
	background: linear-gradient(-90deg, #FA4E4E, #FD894F);
	border-radius: 5rpx;
	width: 94%;
	margin: 50rpx auto 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
	position: absolute;
	bottom: 0%;
	left: 3%;

}

.botbg {
	.shibot {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 85rpx;
	}
}

/deep/.time .u-btn--primary {
	color: #ffffff;
	border-color: #FD874F;
	background-color: #FD874F;
}</style>
